import React, {Component} from 'react';
import Child from "./components/Child";
import Loading from "./components/Loading";

/*
* 错误边界：Error Boundary
* 注意：
* 1.只能捕获子组件的异常
* 2.只有子组件出现错误时才会触发相应的钩子函数
* 3.钩子函数static getDerivedStateFromError(error)常与componentDidCatch联用
* 4.static getDerivedStateFromError(error)函数需要返回一个状态，该状态会与子组件的状态进行合并
* 5.componentDidCatch函数用于向服务端发送请求来发送当前的错误日志
* 6.getDerivedStateFromError中的error是一个对象，有两个属性（message：错误信息,stack:详细的错误信息）,
* 这两个属性同时也会作为componentDidCatch的两个参数
* */
class App extends Component {
    static getDerivedStateFromError(error){
        console.log('1-getDerivedStateFromError',error)
        return {isError:true}
    }
    componentDidCatch(error, errorInfo) {
        console.log('2-componentDidCatch',error,errorInfo)
    }

    render() {
        return (
            <div>
                <h4>我是App组件</h4>
                {
                    this.state?.isError? <Loading/>:<Child/>
                }
            </div>
        );
    }
}

export default App;